<template>
  <a-card
    class="general-card"
    :title="$t('workplace.quick.operation')"
    :header-style="{ paddingBottom: '0' }"
    :body-style="{ padding: '24px 20px 0 20px' }"
  >
    <template #extra> 
      <!-- <a-link>{{ $t('workplace.quickOperation.setup') }}</a-link> -->
    </template>
    <a-row :gutter="8" >
      <a-col v-for="link in links" :key="link.text" :span="8" class="wrapper" @click="GoPage(link.url)">
        <div class="icon">
          <component :is="link.icon" />  
        </div>
        <a-typography-paragraph class="text">
          {{ link.text }}
        </a-typography-paragraph>
      </a-col>
    </a-row>
    <a-divider class="split-line" style="margin: 0" />
  </a-card>
</template>

<script lang="ts" setup>
  import { computed, ref, watch } from 'vue';
  import { useRoute, useRouter, RouteRecordRaw } from 'vue-router';

  const links = ref([] as Array<any>);
  const router = useRouter();
  
  const props = defineProps({
    role: {
      type: String,
      default: ''
    }
  });

  watch(props, async (newp, oldp) => {
    if(props.role=='Operator') {
      links.value = [
        { text: '线索管理', icon: 'icon-thunderbolt', url: "Leads" },
        { text: '跟进管理', icon: 'icon-thunderbolt', url: "FollowRecords" },
        { text: '试听课表', icon: 'icon-thunderbolt', url: "TrialLessonsSchedule" },
      ]
    } else if (props.role=='Supervisor') {
      links.value = [
        { text: '应用管理', icon: 'icon-thunderbolt', url: "Applications" },
      ]
    }
  });

  const GoPage = (url:any) => { 
    router.push({ name: url,  });
  };
</script>

<style scoped lang="less"></style>
